<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="订单详情"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="cell">
      <div>订单编号</div>
      <div>{{ order.trustSn }}</div>
    </div>
    <div class="cell" v-if="order.house.house_id">
      <div>房源编号</div>
      <div>{{ order.house.house_id }}</div>
    </div>
    <div class="cell">
      <div>订单名称</div>
      <div v-if="order.trustType == '1'">房源录入</div>
      <div v-if="order.trustType == '2'">交割服务</div>
      <div v-if="order.trustType == '3'">交易服务</div>
      <div v-if="order.trustType == '4'">金融服务</div>
      <div v-if="order.trustType == '5'">二手房带看服务</div>
      <div v-if="order.trustType == '6'">新房咨询单</div>
      <div v-if="order.trustType == '7'">新房团购单</div>
      <div v-if="order.trustType == '9'">购房需求服务单</div>
      <div v-if="order.trustType == '10'">租房定制需求单</div>
    </div>
    <div class="cell">
      <div>获得方式</div>
      <div>{{ order.type }}</div>
    </div>
    <div v-if="order.trustType == '1' || order.trustType == '6'" class="cell">
      <div>佣金预估<span style="margin-left: 3px;">获得房源,可全网发布</span></div>
      <div>0.00元</div>
    </div>
    <div v-if="order.trustType == '5'" class="cell">
      <div>预估服务佣金</div>
      <div>0元</div>
    </div>
    <div v-if="order.trustType == '7'" class="othercell">
      <div class="tbox">预计服务佣金</div>
      <div class="bbox">新房相关服务佣金经纪人与开发商自行协商</div>
    </div>
    <div
      v-if="
        order.trustType == '2' ||
        order.trustType == '3' ||
        order.trustType == '4'
      "
      class="othercell"
    >
      <div class="tbox">预计服务佣金</div>
      <div class="compute compute2">
        <div class="val">{{ order.listedPrice }}</div>
        <div>*</div>
        <div class="val">{{ order.ratio }}%</div>
        <div>=</div>
        <div class="val">
          {{ ((order.listedPrice * order.ratio) / 100).toFixed(3) }}
        </div>
      </div>
      <div class="compute">
        <div class="fh">总房价(万)</div>
        <div class="fh fh2">佣金比例</div>
        <div class="fh fh3">预计佣金(万)</div>
      </div>
    </div>
    <div class="cell">
      <div>获得订单时间</div>
      <div>{{ order.get_time }}</div>
    </div>
    <div class="cell" v-if="order.expectedTime">
      <div>服务需求时间</div>
      <div>{{ order.expectedTime }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '1'">
      <div>小区名称</div>
      <div>{{ order.house.subdistrict }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '1'">
      <div>房源地址</div>
      <div>{{ order.address }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>房源区域</div>
      <div>{{ order.city }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>租赁类型</div>
      <div>{{ order.rental_way }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>价格范围</div>
      <div>{{ order.min_price }}~{{ order.max_price }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '10'">
      <div>房间户型</div>
      <div>{{ order.house_type }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '7'">
      <div>房源名称</div>
      <div>{{ order.house.subdistrict }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '7'">
      <div>单价</div>
      <div>{{ order.house.selling_price }}/㎡</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>购房预算(首付)</div>
      <div>{{ order.first_money }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>户型</div>
      <div>{{ order.house_type }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>面积</div>
      <div>{{ order.house_acre }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>区域</div>
      <div>{{ order.city }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '9'">
      <div>预计购买时间</div>
      <div>{{ order.expect_month }}</div>
    </div>
    <div class="cell" v-if="order.trustType == '1'">
      <div>城市区域</div>
      <div>{{ order.city }}</div>
    </div>
    <div v-if="order.trustType == '1'" class="cell">
      <div>服务内容</div>
      <div>完成房源录入并验核通过</div>
    </div>
    <div v-if="order.trustType == '6'" class="cell">
      <div>服务内容</div>
      <div>回复用户在线咨询问题</div>
    </div>
    <div v-if="order.trustType == '5' || order.trustType == '7'" class="cell">
      <div>服务内容</div>
      <div>讲解房源优劣势了解买家需求</div>
    </div>
    <div v-if="order.trustType == '2'" class="cell">
      <div>服务内容</div>
      <div>完成物业完整交接</div>
    </div>
    <div v-if="order.trustType == '3'" class="cell">
      <div>服务内容</div>
      <div>完成合同签订及款项支付</div>
    </div>
    <div v-if="order.trustType == '4'" class="cell">
      <div>服务内容</div>
      <div>完成业主及买家金融服务需求</div>
    </div>
    <div v-if="order.trustType == '2'" class="tips">
      <span>物业交接</span>
      <span>维修基金更名</span>
      <span>房屋验收 </span>
    </div>
    <div v-if="order.trustType == '3'" class="tips">
      <span>签订意向合同</span>
      <span>支付意向定金</span>
      <span>网签合同+首付</span>
      <span>审税完税</span>
      <span>审税缴纳</span>
      <span>产权过户</span>
    </div>
    <div v-if="order.trustType == '4'" class="tips">
      <span>贷款资料准备</span>
      <span>还贷赎楼</span>
      <span>房本解押</span>
      <span>贷款送审</span>
      <span>银行放款</span>
      <span>抵押登记</span>
    </div>
    <!-- <div v-show="get" class="cell">
      <div>联系方式</div>
      <div>{{ order.releaseUsername }}先生(女士)</div>
    </div> -->
    <!-- <div v-show="get" class="info">
      <img :src="order.image" alt="" />
      <div>
        <div class="name">{{ order.subdistrict }}</div>
        <div class="address">地址:{{ order.address }}</div>
      </div>
    </div> -->
    <div
      v-show="!get"
      :class="
        order.trustType == '1' || order.trustType == '5'
          ? 'btnpart2'
          : 'btnpart'
      "
    >
      <div class="btn">
        <button @click="cancelorder">放弃订单</button>
        <button @click="getorder">接受订单</button>
      </div>
      <div class="safe"></div>
    </div>
    <div class="lian">
      <span>联系方式</span>
      <span>(接受订单后可以拨打电话)</span>
    </div>
    <div
      v-if="
        order.trustType == 9 || order.trustType == 7 || order.trustType == 10
      "
    >
      <div class="cardphone">
        {{ order.releaseUsername }}<span v-if="order.trustType != 10">买家</span
        ><span v-if="order.trustType == 10">租客</span>
        <div style="flex: 1"></div>
        <van-icon
          size="20px"
          name="phone-o"
          :color="iconColor"
          @click="call(order.releaseUserMobile)"
        />
      </div>
    </div>
    <div
      class="cardinfo"
      v-if="
        order.trustType != 9 && order.trustType != 7 && order.trustType != 10
      "
    >
      <div v-if="order.house.release_role == 2 && order.trustType != 1">
        <div class="cardphone">
          {{ order.house_user.realname }}<span>业主</span>
          <div style="flex: 1"></div>
          <van-icon
            size="20px"
            name="phone-o"
            :color="iconColor"
            @click="call(order.house_user.mobile)"
          />
        </div>
        <div class="cardphone">
          {{ order.buy_user.realname }}<span>买家</span>
          <div style="flex: 1"></div>
          <van-icon
            size="20px"
            name="phone-o"
            :color="iconColor"
            @click="call(order.buy_user.mobile)"
          />
        </div>
      </div>
      <div v-if="order.house.release_role == 1 && order.trustType != 1">
        <div class="cardphone">
          {{ order.house_user.realname }}<span>经纪人</span>
          <div style="flex: 1"></div>
          <van-icon
            size="20px"
            name="phone-o"
            :color="iconColor"
            @click="call(order.house_user.mobile)"
          />
        </div>
        <div class="cardphone">
          {{ order.buy_user.realname }}<span>买家</span>
          <div style="flex: 1"></div>
          <van-icon
            size="20px"
            name="phone-o"
            :color="iconColor"
            @click="call(order.buy_user.mobile)"
          />
        </div>
      </div>
      <div v-if="order.trustType == 1">
        <div class="cardphone">
          {{ order.house_user.realname }}<span>业主</span>
          <div style="flex: 1"></div>
          <van-icon
            size="20px"
            name="phone-o"
            :color="iconColor"
            @click="call(order.house_user.mobile)"
          />
        </div>
      </div>
      <!-- <div class="name">
        X先生(女士)<span>业主</span>
        <div style="flex: 1"></div>
        <van-icon name="phone-o" />
      </div> -->
      <div @click="goDetail" v-if="order.trustType != 1">
        <van-image
          width="95px"
          height="80px"
          lazy-load
          :src="order.image"
          fit="cover"
          radius="5px"
        />
        <div>
          <div>{{ order.subdistrict }}</div>
          <div>
            {{ order.house.house_type }} | {{ order.house.covered_area }} |
            {{ order.house.floor }}
          </div>
          <div>{{ order.house.address.slice(0, 16) }}...</div>
          <div>
            <span>{{ order.house.listed_price }}万</span>
            <span
              >{{
                (order.house.listed_price / order.house.covered_area).toFixed(
                  2
                ) * 10000
              }}/㎡</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="tipswords">
      <div>*订单锁定5分钟，超时或拒绝将取消并分配给其他经纪人</div>
      <div>*接受订单后不可撤销拒绝服务将被扣除服务保证金</div>
      <div>*到期未完成服务将被扣除服务保证金</div>
    </div>
    <!-- <div v-show="get" class="commit">
      <div @click="call">
        <van-icon name="phone-circle-o" /><span>拨打电话</span>
      </div>
      <div @click="talk">
        <van-icon name="comment-o" /><span>在线沟通</span>
      </div>
    </div> -->
    <div class="slot"></div>
  </div>
</template>

<script>
import {
  grabOrderInfo,
  getUserInfo,
  getGraborder,
  cancelGraborder,
} from "../../apis/user";
import local from "../../utils/local";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      active: 0,
      get: false,
      trustId: "",
      order: {},
      timer: "",
      iconColor: "#ccc",
    };
  },
  created() {
    this.trustId = this.$route.query.trustId;
    this.userId = getUserId() ? getUserId() : "";
    this.timer = setTimeout(() => {
      cancelGraborder({ trustId: this.trustId }).then((res) => {
        if (res.code == 200) {
          console.log(1);
        }
      });
    }, 300000);
    grabOrderInfo({ trustId: this.trustId }).then((res) => {
      console.log(res);
      if (res.code == 201) {
        this.order = res.result;
        if (res.result.receipt == 2) {
          this.get = true;
          this.iconColor = "#45b7cb";
        }
      }
    });
  },
  methods: {
    goDetail() {
      if (this.get) {
        this.$router.push({
          path: "/buyhousedetail",
          query: {
            houseId: this.order.house.house_id,
          },
        });
      }
    },
    back() {
      this.$router.go(-1);
    },
    getorder() {
      getUserInfo({ userId: this.userId }).then((res) => {
        local.set("userInfo", JSON.stringify(res.result));
        console.log("用户信息", res);
        if (
          res.result.agent.vip == 2 &&
          res.result.agent.cautionMoney == "1000"
        ) {
          this.$dialog
            .confirm({
              message: "是否确认接受订单",
              messageAlign: "left",
            })
            .then(() => {
              getGraborder({ trustId: this.trustId }).then((res) => {
                console.log(res);
                if (res.code == 200) {
                  this.get = true;
                  this.iconColor = "#45b7cb";
                  clearTimeout(this.timer);
                  this.$router.push({
                    path: "/serviceorderagentdetail",
                    query: { trustId: this.trustId },
                  });
                } else {
                  this.$toast(res.msg);
                }
              });
            })
            .catch(() => {});
        } else {
          this.$dialog
            .confirm({
              message:
                "接受订单需同时缴纳会员和保证金，请5分钟之内接受订单，否则将超时回收",
              messageAlign: "left",
            })
            .then(() => {
              this.$router.push({ path: "/buyjoin" });
            })
            .catch(() => {});
        }
      });
    },
    cancelorder() {
      this.$dialog
        .confirm({
          message: "是否确认放弃订单",
          messageAlign: "left",
        })
        .then(() => {
          cancelGraborder({ trustId: this.trustId }).then((res) => {
            if (res.code == 200) {
              clearTimeout(this.timer);
              this.$router.go(-1);
            }
          });
        })
        .catch(() => {});
    },
    call(phone) {
      if (this.get) {
        console.log("拨打电话", phone);
        window.location.href = `tel:${phone}`;
      }
    },
    talk() {
      this.$router.push({
        path: "/chatcontent",
        query: { targetId: this.order.releaseUserId },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.lian {
  margin: 0 15px;
  span:last-child {
    margin-left: 10px;
    font-size: 13px;
  }
}
.slot {
  height: 20px;
}
.cardphone {
  display: flex;
  justify-content: space-between;
  color: #333;
  margin: 15px;
  span {
    color: #fff;
    font-size: 10px;
    background-color: #45b7cb;
    padding: 2px 5px;
    border-radius: 10px;
  }
  .van-icon {
    color: #45b7cb;
  }
}
.cell {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  color: #333;
  > div {
    display: flex;
    align-items: center;
    &:first-child {
      font-weight: bold;
      span {
        font-size: 12px;
        color: #999;
      }
    }
    &:last-child {
      font-size: 14px;
    }
  }
}
.othercell {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f1f1f1;
  color: #333;
  .tbox {
    font-weight: bold;
  }
  .bbox {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }
  .compute2 {
    justify-content: space-evenly !important;
  }
  .compute {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;
    .fh2 {
      transform: translateX(20px);
    }
    .fh3 {
      transform: translateX(20px);
    }
    .val {
      border: 1px solid #ccc;
      padding: 3px 20px;
    }
    .fh {
      font-size: 13px;
      color: #999;
    }
  }
}
.tips {
  margin: 10px 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13px;
  > span {
    margin-bottom: 10px;
    text-align: center;
    width: 28%;
    background-color: #f1f1f1;
    color: #333;
    padding: 6px 0;
    border-radius: 15px;
  }
}
.commit {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 15px 0;
  > div {
    display: flex;
    align-items: center;
    color: #45b7cb;
    > span {
      margin-left: 3px;
    }
  }
}
.tipswords {
  border-top: 1px solid #f1f1f1;
  padding: 10px 30px;
  font-size: 12px;
  color: #999;
}
.cardinfo {
  > div:not(:first-child) {
    display: flex;
    margin: 15px;
    align-items: center;
    // justify-content: space-between;
    &:last-child {
      > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #333;
        margin-left: 10px;
        > div {
          display: flex;
          // flex-direction: column;
          justify-content: space-between;
          align-items: center;
          &:first-child {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
          }
          &:nth-child(2) {
            font-size: 12px;
            color: #a0a0a0;
            margin-bottom: 5px;
          }
          &:nth-child(3) {
            font-size: 12px;
            color: #5eb9d0;
            border-radius: 5px;
            background-color: #ebfafd;
            margin-bottom: 5px;
          }
          &:nth-child(4) {
            display: flex;
            justify-content: space-between;
            span:first-child {
              color: #d43b33;
              font-weight: bold;
            }
            span:last-child {
              color: #a0a0a0;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .name {
    color: #333;
    span {
      color: #fff;
      font-size: 10px;
      background-color: #45b7cb;
      padding: 0 5px;
      border-radius: 10px;
      margin-left: 3px;
    }
    .van-icon {
      color: #45b7cb;
    }
  }
}
.info {
  margin: 10px 15px;
  display: flex;
  > img {
    width: 95px;
    height: 80px;
    margin-right: 10px;
  }
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #333;
    .name {
      font-size: 16px;
      font-weight: bold;
    }
    .address {
      font-size: 14px;
    }
    .pri {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      span {
        color: #d43b33;
      }
    }
  }
}
.btnpart2 {
  border: 0;
}
.btnpart {
  border-top: 1px solid #f1f1f1;
}
.btnpart,
.btnpart2 {
  margin: 20px 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  .btn {
    display: flex;
    justify-content: space-around;
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      width: 40%;
      color: #fff;
      &:first-child:active {
        background-color: #ddd;
      }
      &:last-child:active {
        background-image: linear-gradient(
          to bottom right,
          #6fcddd77,
          #49b9cd78
        );
      }
      &:first-child {
        background-color: #fff;
        color: #333;
        border: 1px solid #333;
      }
      &:last-child {
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>